<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${cxt }/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>博主中心</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/personalcenter.css" />
<link rel="stylesheet" type="text/css" href="css/simple-calendar.css" />
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/simple-calendar.js"></script>
<script>
$(function(){
	$(".readmore").click(function(){
		$(this).attr("href",$(this).attr("href")+"?blogid="+$(this).attr("blogid")+"&status=s");
		return true;
	});
	$(".post_comment").click(function(){
		var timestamp=new Date().getTime();
		$.ajax({
			url:'personalcenter/postcoment',
			type:'post',
			data:{'discuss_id':${user.user_id},'article_id':$("#tbCommentAuthor").attr("bolgid"),'discuss_content':$(".comment_edit").val(),'discuss_time':timestamp},
			success:function(data){
				alert("保存成功");
				$(".comment ul").append('<li class="comment-item">'+
						'				 					<div class="comment-item-top clearfix">'+
						'				 						<p class="fl" style="color:#666;font-size:14px;">#1楼 <span>'+timestamp+'</span><span>${user.user_name }</span></p>'+
						'				 						<a class="fr" href="#">修改</a>'+
						'				 					</div>'+
						'				 					<div class="comment-item-con">'+
						'				 						<img src="img/comment.gif">'+
						'				 						<p style="padding-bottom:20px;padding-top:10px;text-indent:50px;">'+$(".comment_edit").val()+'</p>'+
						'				 					</div>'+
						'				 				</li>');
			}
		})
	})
});
</script>
<style>
	.tag{
		color:#666;
		font-size:12px;
		margin-top:20px;
		margin-bottom:20px;
	}
	.author_info{
		padding-top:20px;
		padding-bottom:20px;
	}
	.comment-item{
		border-bottom:2px solid #EDD9B8;
	}
	.author_info_left p a{
		color: #075DB3;
		font-size:10px;
		width:100px;
		  word-break:keep-all;
  white-space:nowrap; 
	}
	.next_prev{
		padding-bottom:16px;
	}
	.comment h3{
		border-bottom: 1px solid #666;
		color:#000;
		font-size:14px;
		line-height:1.6;
		padding-bottom:5px;
	}
	.comment-item-top{
		padding-top:10px;
	}
	.comment ul{
		padding-bottom:40px;
	}
	.comment_edit{
		width:452px;
		height:302px;
		font-size:14px;
	}
	.post_comment{
		width:68px;
		height:26px;
		margin-top:10px;
	}
	.sendComments{
		padding-bottom:100px;
	}
</style>
</head>
<body>
	<div id="header">
		<h2>
			<a href="personalcenter" userid="${user.user_id }">${user.user_name }</a>
		</h2>
	</div>
	<div id="body" class="clearfix">
		<div class="body-con fl">
			<div class="blogs">
				<div class="blogs-top">
					<ul class="nav fl">
						<li class="fl"><a href="personalcenter">首页</a></li>
						<li class="fl"><a href="newessay">新随笔</a></li>
						<li class="fl"><a href="personalinfo">个人账户信息</a></li>
					</ul>
				</div>
				<div class="blogs-con">
				 		<h2> ${blogdetail.article_title }</h2>
				 		<div>${blogdetail.article_content}</div>
				 		<div class="tag">标签:${blogdetail.types_name}</div>
				 		<div class="author_info clearfix">
				 			<div class="author_info_left fl">
				 				<a href="#" class="fl"><img src="${blogdetail.user_image}" width="50px" height="50px"></a>
				 				<div class="fl" style="margin-left:20px;">
				 				<p><a>${blogdetail.user_name}</a></p>
				 				<p><a>获赞数 -${blogdetail.article_supportnumber}</a></p>
				 				<p><a>评论数 -${blogdetail.comment_count}</a></p>
				 				</div>
				 			</div>
				 			<div class="author_info_right fr">
				 				<div style="width:46px;height:57px;background:url(img/upup.gif);text-align:center;margin-right:40px;">
				 					<p>${blogdetail.article_supportnumber}</p>
				 				</div>
				 			</div>
				 		</div>
				 		<div class="next_prev">
				 			<p>上一篇：<c:if test="${blogdetail.prev==null }">没有上一篇</c:if>
				 			<c:if test="${blogdetail.prev!=null }">
				 			<a  href="personalcenter/detail" blogid="${blogdetail.prev}" class="readmore">${blogdetail.prev_title}</a></c:if></p>
				 			<p>下一篇：<c:if test="${blogdetail.next==null }">没有下一篇</c:if>
				 			<c:if test="${blogdetail.next!=null }">
				 			<a  href="personalcenter/detail" blogid="${blogdetail.next}" class="readmore">${blogdetail.next_title}</a></c:if></p>
				 		</div>
				 		<div style="text-align:right;margin-bottom:30px;">
				 			posted @ ${blogdetail.article_time} <a>${blogdetail.user_name}</a> 阅读(${blogdetail.article_readnumber}) 评论(${blogdetail.comment_count}) 编辑 收藏
				 		</div>
				 		<div class="comment">
				 			<h3>评论</h3>
				 			<ul>
				 				<c:if test="${fn:length(coment)!=0 }">
				 				<c:forEach var="discuss" items="${coment}">
				 				<li class="comment-item">
				 					<div class="comment-item-top clearfix">
				 						<p class="fl" style="color:#666;font-size:14px;">#1楼 <span>${discuss.discuss_time } </span><span>${discuss.user_name }</span></p>
				 						<a class="fr" href="#">修改</a>
				 					</div>
				 					<div class="comment-item-con">
				 						<img src="img/comment.gif">
				 						<p style="padding-bottom:20px;padding-top:10px;text-indent:50px;">${discuss.discuss_content }</p>
				 					</div>
				 				</li>
				 				</c:forEach>
				 				</c:if>
				 			</ul>
				 		</div>
				 		<div class="sendComments" >
				 			<div class="comments_title">
				 				<img src="img/icon_addcomment.gif">
				 				<span>发表评论</span>
				 			</div>
				 			<div class="comments_author">
				 				昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="${blogdetail.user_name}" bolgid="${blogdetail.article_id }">
				 			</div>
				 			<p>评论内容：</p>
				 			<textarea class="comment_edit">
				 			</textarea><br/>
				 			<input type="button" value="提交评论" class="post_comment">
				 		</div>
				</div>
			</div>
		</div>
		<div class="body-silder fr">
			<div class="info">
				昵称： <a href="#">只会敲代码的攻城狮</a><br /> 园龄： <a href="#">10个月</a>

			</div>
			<div id='container'></div>
			<div class="rank">
				<h3>阅读排行榜</h3>
				<ul>
					<li><a href="#">1. 小tips：用java模拟小球做抛物线运动(769)</a></li>
					<li><a href="#">2. java执行程序的内存分析系列专栏(304) </a></li>
					<li><a href="#">3. java执行程序的内存分析系列专栏二之static变量和方法内存分析(53)
					</a></li>
					<li><a href="#">4. 容器_JDK源码分析_自己简单实现ArrayList容器(35)</a></li>
					<li><a href="#">5. mysql常用命令总结(10)</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="footer">Copyright ©2018 只会敲代码的攻城狮</div>
	<script>
		var options = {
			width : '230px',
			height : '300px',
		}
		var myCalendar = new SimpleCalendar('#container', options);
	</script>
</body>
</html>